<template>
    <div class="suishoucontainer"   id="mainScroll">

      <div class="com-errorPage" v-if="datalist && datalist.length==0">
        <p class="erroricon"><i class="icon icon-nodata"></i></p>
        <p class="errormsg">您还没有随手拍</p>
      </div>

      <ul class="allpictures">
        <li v-for="(itemli,index) in datalist" class="suishoupic hairline-top hairline-bottom" @click = "goDetail( itemli ,index)" >
          <div class="pictitlesui"><a class="subject-link" @click.stop="goSubject(itemli.subjectId)">{{itemli.subjectName}}</a><span class="detail-content-com" v-html="itemli.content"></span></div>
          <ul class="pisalldec">
            <li v-for="(picitem, index) in itemli.photos" v-if="index < 3" class="pisalldecli" :class="{'gap': index < 2}" :style="'background-image:url('+  picitem.fileUrl | thumbnail('_216_2048_100_0')  +')'" >
            </li>
            <i class="img-num-box" v-html="itemli.photos.length" v-if="itemli.photos.length > 3"></i>
          </ul>
          <div class="messageaboutpic clearfix"  >
            <span class="messagedata fl">{{itemli.createTime}}</span>
            <span  class="daishenhe fr" v-if="itemli.auditCode==1">审核中</span>
            <span class="weitongguo fr" v-else-if="itemli.auditCode==2">未通过</span>
            <span v-else>
              <span v-if="!itemli.feedback" class="dianzanor fr " :class="{islight:itemli.praised,isdark: !itemli.praised}" >
                  <span class="vote"></span>
                  <span class="dianzancount">{{itemli.praiseCount | changeVote}}</span>
                  <span class="pinglunpic">
                        <img  class="iconpinglun" src="../../../assets/img/icon/icon-commont.png" >
                        <span class="commentpic">{{itemli.commentCount | changeDis}}</span>
                        <i class="comment-dot" v-if="itemli.commenting"></i>
                  </span>
              </span>
              <span class="dianzanor fr" v-else>
                <span class="waitconfirm" :class="{'red': itemli.feedback == 0 ? true : false}">{{itemli.feedback | feedbackText(itemli.dealStatus)}}</span>
              </span>
            </span>
          </div>
        </li>
      </ul>
      <div id="more" data-gap="100"></div>
    </div>
</template>
<script>
    import index from  "./list.js"
    export default index ;
</script>
<style scoped>
  /*专题*/
  a.subject-link{
    color: #12418E;
  }
  .suishoupic{margin-top: 11px; background: #FFFFFF; }
  .pisalldec{overflow: hidden; padding: 0 15px; position: relative}
  .img-num-box {
    position: absolute;
    background: rgba(0, 0, 0, 0.40);
    border-radius: 2px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
    bottom: 10px;
    right: 25px;
  }
  .pisalldecli{
    /*display: inline-block;
    vertical-align: middle;*/
    float: left;
    width: 113px;
    height: 113px;
    /*vertical-align: middle;*/
    background-color: #efefef;
    background-size: cover;
    background-position: center;
  }
  .red {
     color: #DF3031;
  }
  .comment-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF3B30;
  left: 11px;
  top: -3px;
}
  .pisalldecli.gap {
    margin-right: 3px;
  }
  .pinglunpic{margin-left: 35px; position: relative}
  .pictureevery{width: 108px; height: 108px; vertical-align: middle; margin-right: 10px; background: #efefef;}
  .pictitlesui{font-family: STHeitiSC-Light; font-size: 15px; color: #000000; line-height: 23px;  padding: 15px 15px 10px;}

  /* modify */
  .messagedata{font-family: STHeitiSC-Light; font-size: 14px; color: #8E8E93; line-height: 18px;}

  .dianzancount{font-family: STHeitiSC-Light; font-size: 14px;color: #868686; }
  .commentpic{font-family: STHeitiSC-Light; font-size: 14px; color: #868686;}
  .messageaboutpic{
    vertical-align: middle;
    height: 57px;
    padding: 20px 15px 19px;
    line-height: 18px;
  }
  .daishenhe,.weitongguo{font-family: STHeitiSC-Light; font-size: 17px; color: #DF3031; line-height: 17px;}
  .islight .vote{float: left ;display: inline-block; width: 17px; height: 17px; background: url(../img/vote.png) center center no-repeat; background-size: 100% 100%; vertical-align: middle; margin-right: 5px;}
  .isdark .vote{float: left ; display: inline-block; width: 17px; height:17px; background: url(../img/novote.png) center center no-repeat; background-size: 100% 100%; vertical-align: middle; margin-right: 5px;}
  .islight .dianzancount{color: #DF3031;padding-top: 2px;float: left;}
  .iconpinglun{width: 17px; height:17px; vertical-align: middle; margin-right: 5px;}
  .waitconfirm{font-family: STHeitiSC-Light; font-size: 17px; color: #8E8E93; line-height: 17px; float: left; }
  .red{color:#DF3031;}
  .chakanprogress{font-family: STHeitiSC-Light; font-size: 15px; color: #FFFFFF; display: inline-block; width: 83px; height: 32px; line-height: 32px; text-align: center; background: #DF3031; border-radius: 2px;;}
  .linehei{line-height: 32px;}
  .clearfix:after{content: "";display: block;clear: both;}
  .clearfix{zoom: 1;}
  .fr{float: right;}
  .fl{float: left;}
</style>
